<template>
  <div class="notification-badge">
    <el-popover
      placement="bottom"
      :width="320"
      trigger="click"
      popper-class="notification-popover"
    >
      <template #reference>
        <div class="badge-wrapper" @click="fetchLatestNotifications">
          <el-badge :value="unreadCount" :hidden="unreadCount === 0" class="notification-icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.36 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.63 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16Z"
                fill="currentColor"
              />
            </svg>
          </el-badge>
        </div>
      </template>

      <div class="notification-header">
        <h3>通知消息</h3>
        <div class="header-actions">
          <el-button
            type="text"
            size="small"
            @click="markAllAsRead"
            :disabled="!hasUnread"
          >
            全部已读
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="navigateToNotifications"
          >
            查看详情
          </el-button>
        </div>
      </div>

      <div class="notification-list-container" v-loading="loading">
        <div v-if="latestNotifications.length === 0" class="empty-state">
          <p>暂无通知</p>
        </div>
        <div v-else class="notification-list">
          <div
            v-for="notification in latestNotifications"
            :key="notification.id"
            class="notification-item"
            :class="{ 'is-read': notification.read }"
            @click="viewNotification(notification)"
          >
            <div class="notification-dot" :class="notification.type"></div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.content }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNotificationStore } from '../../stores/notification'
import { ElMessage } from 'element-plus'

const notificationStore = useNotificationStore()
const router = useRouter()
const loading = ref(false)
const latestNotifications = ref([])

// 获取未读消息数量
const unreadCount = computed(() => notificationStore.unreadCount)
const hasUnread = computed(() => unreadCount.value > 0)

// 获取最新通知
const fetchLatestNotifications = async () => {
  loading.value = true
  try {
    console.log('获取最新通知...');
    // 从服务器刷新通知数据，使用位置ID
    await notificationStore.fetchNotifications()
    
    // 获取最新的5条通知
    latestNotifications.value = notificationStore.allNotifications.slice(0, 5)
    console.log('通知已刷新: 获取到', latestNotifications.value.length, '条通知')
  } catch (error) {
    console.error('获取最新通知失败:', error)
  } finally {
    loading.value = false
  }
}

// 查看通知详情
const viewNotification = async (notification) => {
  if (!notification.read) {
    await notificationStore.markAsRead(notification.id)
  }
  
  // 如果通知关联了物品，可以跳转到物品详情页
  if (notification.itemId) {
    router.push(`/items/${notification.itemId}`)
  }
}

// 标记所有为已读
const markAllAsRead = async () => {
  await notificationStore.markAllAsRead()
  ElMessage.success('已将所有通知标记为已读')
}

// 跳转到通知页面
const navigateToNotifications = () => {
  router.push('/notifications')
}

onMounted(() => {
  // 初始化时获取最新的通知
  fetchLatestNotifications()
})
</script>

<style scoped>
.notification-badge {
  position: relative;
  cursor: pointer;
}

.badge-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.badge-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .badge-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon svg {
  width: 24px;
  height: 24px;
  color: var(--el-text-color-primary);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.notification-list-container {
  max-height: 320px;
  overflow-y: auto;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--el-text-color-secondary);
}

.notification-list {
  padding: 8px 0;
}

.notification-item {
  display: flex;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid var(--el-border-color-lighter);
  position: relative;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background-color: var(--el-fill-color-light);
}

.notification-item.is-read {
  opacity: 0.7;
}

.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
}

.notification-dot::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: pulse 2s infinite;
  opacity: 0;
}

.notification-item:not(.is-read) .notification-dot::before {
  opacity: 1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.notification-dot.system {
  background-color: #67C23A;
}

.notification-dot.inventory {
  background-color: #409EFF;
}

.notification-dot.expiry {
  background-color: #E6A23C;
}

.notification-dot.updates {
  background-color: #909399;
}

.notification-dot.login {
  background-color: #8E44AD;
}

.notification-dot.permission {
  background-color: #F56C6C;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notification-time {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>

<style>
.notification-popover {
  padding: 0;
  min-width: 320px;
}
</style> 